<template>
  <div class="backstageVideoUploadManagement">
    <h3>后台视频上传管理</h3>
    <div class="search">
      <div class="cond1 cond">
        <el-input placeholder="请输入视频标题" v-model="search1">
          <template slot="prepend">视频标题</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入关键词" v-model="search2">
          <template slot="prepend">关键词</template>
        </el-input>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <div class="opration">
      <el-button type="success" icon="el-icon-plus" @click="addData">添加</el-button>
      <el-button type="success" @click="batchShelves">批量上架</el-button>
      <el-button type="danger" @click="batchTakeOff">批量下架</el-button>
    </div>
    <div class="list">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column header-align="center" align="center" type="selection" width="55"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="视频ID"
          sortable
          width="90"
        ></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="用户ID" width="90"></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="用户名" width="130"></el-table-column>
        <el-table-column header-align="center" align="center" label="播放" width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handlePlay(scope.$index, scope.row)">播放</el-button>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="金币数" width="130"></el-table-column>
        <el-table-column header-align="center" align="center" label="话题圈">
          <template slot-scope="scope">
            <el-button
              @click="handleModifyTopic(scope.$index,scope.row)"
              type="text"
              size="small"
            >{{scope.row.address}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="创建时间"
          sortable
          width="150"
        ></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="转码状态" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" label="操作" width="300" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              v-show="!isTakeOff"
              @click="handleTakeOff(scope.$index, scope.row)"
            >下架</el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleShelves(scope.$index, scope.row)"
              v-show="isTakeOff"
            >上架</el-button>
            <el-button
              size="mini"
              type="success"
              v-show="isSticky"
              @click="handleSticky(scope.$index, scope.row)"
            >置顶</el-button>
            <el-button
              size="mini"
              type="danger"
              v-show="!isSticky"
              @click="handleNoSticky(scope.$index, scope.row)"
            >正常</el-button>
            <el-button size="mini" type="primary" @click="handleModify(scope.$index, scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next, jumper"
        :total="1000"
      ></el-pagination>
    </div>
    <!-- //修改话题圈弹窗 -->
    <el-dialog title="修改话题圈" :visible.sync="modifyTopicDialogVisible" width="40%" center>
      <div>
        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textareaTopic"></el-input>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitModifyTopic">提交</el-button>
        <el-button type="info" size="small" @click="cancelModifyTopic">取消</el-button>
      </div>
    </el-dialog>
    <!-- //编辑视频相关信息弹窗 -->
    <el-dialog title="视频编辑" :visible.sync="modifyEditorDialogVisible" width="40%" center>
      <div class="row">
        <span>ID：</span>
        <el-input v-model="inputVideoId" :disabled="true"></el-input>
      </div>
      <div class="row">
        <span>标题：</span>
        <el-input placeholder="请输入标题" v-model="inputTitle" clearable></el-input>
      </div>
      <div class="row">
        <span>用户id：</span>
        <el-input placeholder="请输入用户Id" v-model="inputUserId" clearable></el-input>
      </div>
      <div class="row">
        <span>金币数：</span>
        <el-input-number v-model="goldNum" :min="1" label="描述文字"></el-input-number>
      </div>
      <div class="row">
        <span>图片：</span>
        <img :src="imgUrl" alt />
      </div>
      <div class="row">
        <span>上传图片：</span>
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </div>
      <div class="row">
        <span>类型选择：</span>
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="老师"></el-checkbox>
          <el-checkbox label="学生"></el-checkbox>
          <el-checkbox label="白领"></el-checkbox>
          <el-checkbox label="护士"></el-checkbox>
          <el-checkbox label="秘书"></el-checkbox>
          <el-checkbox label="模特"></el-checkbox>
          <el-checkbox label="白领"></el-checkbox>
          <el-checkbox label="老师"></el-checkbox>
          <el-checkbox label="学生"></el-checkbox>
          <el-checkbox label="白领"></el-checkbox>
          <el-checkbox label="护士"></el-checkbox>
          <el-checkbox label="秘书"></el-checkbox>
          <el-checkbox label="模特"></el-checkbox>
          <el-checkbox label="白领"></el-checkbox>
          <el-checkbox label="老师"></el-checkbox>
          <el-checkbox label="学生"></el-checkbox>
          <el-checkbox label="白领"></el-checkbox>
          <el-checkbox label="护士"></el-checkbox>
          <el-checkbox label="秘书"></el-checkbox>
          <el-checkbox label="模特"></el-checkbox>
          <el-checkbox label="白领"></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="row">
        <span>上传文件名：</span>
        <el-input placeholder="请输入标题" v-model="inputFileName" clearable></el-input>
      </div>
      <div class="row">
        <span>视频上传：</span>
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-success="handleSuccess"
          :on-error="handleError"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitModifyEditor">提交</el-button>
        <el-button type="info" size="small" @click="cancelModifyEditor">取消</el-button>
      </div>
    </el-dialog>
    <!-- //播放弹窗 -->
    <el-dialog title="播放" :visible.sync="playDialogVisible" width="40%" center>
      <div>
        <video
          controls
          width="100%"
          src="http://douyin-mp4.cdncloud3.me:8088/video_user/oc/et/12ocetb99015ee41867f65b10a0d21ac31ad259163.mp4"
        >Sorry, your browser doesn't support embedded videos.</video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "backstageVideoUploadManagement",
  data() {
    return {
      search1: "",
      search2: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          num: 1,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          num: 2,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          num: 3,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          num: 4,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        }
      ],
      currentPage1:1,
      //多选框选中的值
      multipleSelection: [],
      //是否下架
      isTakeOff: true,
      //是否置顶
      isSticky: true,
      //修改话题圈
      modifyTopicDialogVisible: false,
      //话题内容
      textareaTopic: "",
      //修改编辑视频相关信息弹窗
      modifyEditorDialogVisible: false,
      //视频编辑视频Id
      inputVideoId: "",
      //视频编辑用户id
      inputUserId: "",
      //视频编辑弹窗，视频标题
      inputTitle: "",
      //视频编辑弹窗，金币数
      goldNum: "",
      //视频编辑弹窗，旧图片地址
      imgUrl: "",
      //视频编辑弹窗，新图片地址
      dialogImageUrl: "",
      //视频编辑弹窗，图片预览
      dialogVisible: false,
      //视频编辑弹窗，已选择类型
      checkList: [],
      //视频编辑弹窗，上传文件名
      inputFileName: "",
      //播放视频弹窗
      playDialogVisible: false
    };
  },
  mounted() {},
  methods: {
      // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
    },
    //多选框选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //批量上架
    batchShelves() {
      this.$confirm("是否继续该操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    //批量下架
    batchTakeOff() {
      this.$confirm("是否继续该操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    //添加
    addData() {
      this.modifyEditorDialogVisible = true;
    },
    //播放视频
    handlePlay(index, row) {},
    //下架
    handleTakeOff(index, row) {},
    //上架
    handleShelves(index, row) {},
    //置顶
    handleSticky(index, row) {},
    //正常
    handleNoSticky(index, row) {},
    //修改
    handleModify(index, row) {
      this.modifyEditorDialogVisible = true;
    },
    //删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //修改话题圈
    handleModifyTopic(index, row) {
      this.modifyTopicDialogVisible = true;
      this.textareaTopic = row.address;
    },
    //提交修改话题圈
    submitModifyTopic() {},
    //取消修改话题圈
    cancelModifyTopic() {
      this.modifyTopicDialogVisible = false;
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //删除上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //提交修改编辑视频
    submitModifyEditor() {},
    //取消修改编辑视频
    cancelModifyEditor() {
      this.modifyEditorDialogVisible = false;
    },
    //播放弹窗
    handlePlay() {
      this.playDialogVisible = true;
    },
    //视频上传成功时的钩子
    handleSuccess(){
        this.$message('视频上传成功！');
    },
    //视频上传失败时的钩子
    handleError(){
        this.$message('视频上传失败！');
    },
  }
};
</script>
<style scoped>
h3{
    padding:.2rem;
    color:#3c763d;
}
.search {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}

.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.search .el-select >>> .el-input__inner {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.search .el-select {
  width: 1.67rem;
}
.opration {
  margin-top: 0.2rem;
  padding-left: 0.2rem;
}
.page {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}
.list {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
.dialogBtn {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.row {
  margin-bottom: 0.1rem;
  display: flex;
  align-items: center;
}
.row span {
  width: 1rem;
  display: block;
}
.row >>> .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.row >>> .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.row >>> .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.row >>> .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-checkbox-group {
  width: 90%;
}
</style>